<template>
  <span class="svg-icon" v-if="visible" :style="`width: ${width}px; height: ${height}`">
    <svg
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="5227"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200"
      height="200"
    >
      <path :d="path" :fill="color" />
    </svg>
  </span>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    path: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#ffffff',
    },
    width: {
      type: [Number, String],
      default: '',
    },
    height: {
      type: [Number, String],
      default: '',
    },
    visible: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.svg-icon {
  transition: 0.2s ease-in-out;

  svg {
    width: 100%;
    height: 100%;
  }

  &:hover {
    transform: scale(1.1);
  }
}
</style>
